<template>
    <div class="login-container">
        <div class="login-title-container">
            <img  class="login-title-img" src="https://oss.jtmckj.com/pc/images/account/login-title-img.png" alt="">
            <div class="login-title">Saas智能收银软件</div>
        </div>
        <div class="login-main">
            <div class="login-cover"></div>
            <div class="login-panel">
                <div class="login-form" v-if="!isLogin">
                    <!-- <div class="login-form__title">欢迎登录</div> -->
                     <img class="login-form__img" src="https://oss.jtmckj.com/pc/images/account/login-form__img.png" alt="">
                    <div class="login-form__cell">
                        <el-input class="login-form__input" v-model="postForm.userName" placeholder="请输入账号" type="text" autocomplete="off">
                            <template #prefix>
                                <img class="login-form__icon" src="https://oss.jtmckj.com/pc/images/common/i_icon_account.png" />
                            </template>
                        </el-input>
                    </div>
                    <div class="login-form__cell">
                       

                        <el-input class="login-form__input" v-model="postForm.passWord" placeholder="请输入密码"  :type="passWordStaus ? 'text' : 'password'" autocomplete="off">
                            <template #prefix>
                                <img class="login-form__icon" src="https://oss.jtmckj.com/pc/images/common/i_icon_lock.png" />
                            </template>
                            <template #suffix>
                                <img class="login-form__icon" src="https://oss.jtmckj.com/pc/images/common/i_icon_nosee.png" v-if="passWordStaus == false " @click="passWordStaus= true" />
                                <img class="login-form__icon" src="https://oss.jtmckj.com/pc/images/account/i_icon_noseeAc.png" v-else @click="passWordStaus= false" />
                            </template>
                        </el-input>
                    </div>
                </div>
                <div class="login-form shops" v-if="isLogin">
                    <div class="login-form__title">门店选择</div>
                    <el-select v-model="shopCode" filterable clearable @change="change">
                            <el-option v-for="item in allShops" :key="item.code" :value="item.code"
                            :label="item.name" />
                    </el-select>
                </div>
                <div class="login-free">
                    <el-checkbox-group v-model="checkList" text-color="#FFAB33" fill="#FFAB33">
                        <!-- <el-checkbox class="login-free__checkbox" label="七天内免登录"></el-checkbox> -->
                    </el-checkbox-group>
                </div>
                <div class="login-control">
                    <el-button class="login-control__btn" round @click="onLogin" v-if="!isLogin">登录</el-button>
                    <el-button class="login-control__btn" round @click="onInt" v-if="isLogin">进入</el-button>
                </div>
            </div>
        </div>
        <div class="login-footer">
            <ul class="login-footer-list">
                <li class="login-footer-item">闽ICP备2024034795号-1</li>
                <li class="login-footer-item icon">闽公网安备35011102351016号</li>
                <li class="login-footer-item">癸卯兔科技发展集团 极兔妙创网络科技  技术支持</li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import useAppStore from '@/store/app'
import ls from '@/lib/ls'
import Api from '@/api'
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
const router = useRouter()
const appStore = useAppStore()

const checkList = ref([])
const isLogin =  ref(false)
// const postForm = reactive({
//     nickname: undefined,
//     password: undefined,
// })
const postForm = reactive({
    orgName:'1'
    // username: 'admin',
    // password: '123456',
})
const allShops = ref([])
const shopCode = ref('')
const shopName = ref('')
const passWordStaus = ref(false)
const passErr = ref(0)
const webSiteUrl = ref('')
const onLogin = async function() {
    if(!postForm.userName){
        ElNotification({
            title: '提示',
            message: '请输入账号',
            type: 'warning',
        })
        return
    }
    if(!postForm.passWord){
        ElNotification({
            title: '提示',
            message: '请输入密码',
            type: 'warning',
        })
        return
    }
    Api.Account.PcAppGetStore.Do(postForm)
    .then(res=>{
        const shops = res 
        console.log(shops);
        ls.remove('PASSERR')
        allShops.value = shops.result
        console.log(allShops.value);
        if(allShops.value.length > 0){
            shopCode.value = allShops.value[0].code
            shopName.value = allShops.value[0].name
            webSiteUrl.value = allShops.value[0].webSiteUrl
            isLogin.value = true
        }
    })
    .catch(err=>{
            const errRecord = ls.get('PASSERR') || ''
            if(postForm.userName == errRecord.code){
                passErr.value = errRecord.times
            }else{
                passErr.value = 0
            }
            passErr.value ++ 
            ls.set('PASSERR',{code:postForm.userName,times:passErr.value})
            if(passErr.value >= 5){
                Api.Common.LockUser.Do({ code:postForm.userName }).then(res => {
                    console.log(res);
                    ls.remove('PASSERR')
                })
            }
    })
   

    
}
const change = (e)=>{
    shopName.value = allShops.value.find(item => item.code == e).name
    webSiteUrl.value = allShops.value.find(item => item.code == e).webSiteUrl
    console.log(shopName.value );
}
const onInt = ()=>{
    postForm.orgCode = shopCode.value
    postForm.orgName = shopName.value
    ls.set('USER_INFO',postForm)
    appStore.Login(postForm).then((resPath) => { 
        // configStore.isLogin.state = 1
        // console.log(webSiteUrl.value);
        configStore.isLogin.state = 1
            router.replace({
                path:  '/'
            }) 

        // window.location.replace(webSiteUrl.value + 'consult');
        // router.replace({
        //     path: webSiteUrl.value 
        // }) 
        // console.log('resPath:',resPath);
        // if(resPath){
          
        // } 
    })
}
// console.log(document.documentElement.clientWidth)
// console.log(document.documentElement.clientHeight)
</script>
<style scoped lang="scss">
.login-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('https://oss.jtmckj.com/pc/images/account/i_bg_login.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    .login-title-container {
        position: absolute;
        top: 60px;
        left: 120px;
        display: flex;
        align-items: center;
        .login-title-img {
           width: 97px;
           height: 60px;
        }
        .login-title {
            margin-left: 23px;
            font-weight: bold;
            font-size: 28px;
            color: #FFFFFF;
            line-height: 40px;
        }
    }
    .login-main {
        width: 1200px;
        // height: 400px;
        margin: auto;
        display: flex;

        .login-cover {
            width: 600px;
            height: 100%;
            // background-image: url('https://oss.jtmckj.com/pc/images/account/i_bg_login_cover.png');
            // background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-right: 120px;
        }

        .login-panel {
            width: 480px;
            height: 100%;
            padding: 0 60px;
            background: rgba(0,0,0,0.38);
            box-shadow: 0px 2px 16px 0px rgba(102,102,102,0.1);
            border-radius: 8px;
            border: 2px solid rgba(255,255,255,0.5);
            // opacity: 0.5;
        }

        .login-heading {
            padding-top: 60px;
            display: flex;
        }

        .login-heading__logo {
            width: 368px;
            height: 80px;
        }

        .login-heading__title {
            padding: 36px 0 0 15px;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 36px;
            color: #000000;
            line-height: 36px;
        }

        .login-form {
            padding-top: 37px;
        }

        .login-form__title {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28px;
            color: #fff;
            line-height: 28px;
            padding-bottom: 19px;
        }
        .login-form__img {
            width: 256px;
            height: 40px;
            margin-bottom: 40px;
        }

        .login-form__cell {
            padding-bottom: 40px;

            &:last-child {
                padding-bottom: 0;
            }
        }

        .login-form__input {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24px;
            color: #212121;
            line-height: 24px;
        }
        

        .login-form__icon {
            cursor: pointer;
            width: 32px;
            height: 32px;
        }

        .login-free {
            padding-top: 14px;
        }

        .login-free__checkbox {}

        .login-control {
            margin-bottom: 40px;
            padding-top: 40px;
        }

        .login-control__btn {
            height: 60px;
            background: #FF6A00;
            border-radius: 30px;
            font-weight: 500;
            font-size: 24px;
            color: #FFFFFF;
        }
    }

    .login-footer {
        padding: 40px 0;
        font-size: 0;
        text-align: center;
        background: #000;

        &-list {}

        &-item {
            padding: 0 30px;
            border-right: 2px solid #fff;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #fff;
            line-height: 20px;
            display: inline-block;

            &:last-child {
                border-right: 0;
            }

            &.icon {
                padding-left: 63px;
                position: relative;

                &:after {
                    content: '';
                    position: absolute;
                    top: -2px;
                    left: 30px;
                    width: 24px;
                    height: 25px;
                    background-image: url('https://oss.jtmckj.com/pc/images/common/i_icon_badge.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }
    :deep(.el-select__placeholder) {
       color: #fff;
  }
    :deep(.el-input__wrapper) {
        background-color: rgba(0,0,0,0.38) !important;
        border-radius: 8px;
        height: 60px;
        // box-shadow: 0 0 0 1px #999999 inset;
        border: 1px solid #E6E6E6 ;
        padding: 25px 40px;

        &:hover {
            box-shadow: 0 0 0 1px #FFAB33 inset;
        }
    }

    :deep(.el-select__wrapper) {
    height: 0.25rem !important;
    background-color: rgba(0,0,0,0.38) !important;
    color: #fff !important;
    border-radius: 0.04167rem !important;
    border: 1px solid #E6E6E6;
    box-shadow: none !important;
}

    :deep(.el-input__prefix-inner)>:last-child {
        margin-right: 28px;
    }

    /* 修改checkbox旁边文本的颜色 */
    :deep(.el-checkbox__label) {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #666666;
        line-height: 20px;
    }

    :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
        color: #FFAB33;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner),
    :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
        background-color: #FFAB33;
        border-color: #FFAB33;
    }
    :deep(.el-input__inner) {
    color: #fff;
   }
   :deep(.el-input__inner::placeholder){
    color:red !important;
   }
    :deep(.el-checkbox__inner) {
        background-color: transparent;
        width: 20px;
        height: 20px;

        &:after {
            width: 8px;
            height: 12px;
        }
    }

    :deep(.el-button) {
        display: block;
        width: 100%;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 36px;
        color: #FFFFFF;
        line-height: 36px;
        background: #FF6A00;
        height: inherit;
        border-radius: 30px;
        border: 0;
        padding: 13px 0;
    }
}
.shops{
    ::v-deep{
        .el-select{
            height: 80px
        }
        .el-select__wrapper{
            height: 80px;
        }
        .el-select__selection{
            height: 80px;
            font-size: 26px;
        }
    }
   
}

/* 针对 Chrome 和 Firefox */
::v-deep .el-input__inner:-webkit-autofill,
.el-input__inner:-webkit-autofill:hover,
.el-input__inner:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important; /* 自定义颜色 */
  transition: background-color 5000s ease-in-out 0s;
}

</style>